<template>
  <div id="d-homepageHeader">
    <div class="header">
      <van-row type="flex" align="center">
        <van-col span="4">
          <div>
            <span @click="cityStatus = !cityStatus;">深圳</span>
            <!-- 动画 -->
            <!-- <img
            class="triangle"
            src="../../../assets/img/designer/homePage/triangle@2x.png"
            :class="cityStatus?'start':'end'"
            >-->
          </div>
        </van-col>
        <van-col span="17">
          <!-- <van-search
            v-model="search"
            background
            placeholder="请输入搜索关键词"
            input-align="center"
            @touchStart="searchPage()"
          />-->
          <!-- @focus="searchPage()" -->
          <div class="serachInput" @click="searchPage()">
            <van-icon name="search" />
            <p>搜索</p>
          </div>
        </van-col>
        <van-col span="3">
          <img
            class="servie"
            @click="goToService()"
            src="../../../assets/img/designer/homePage/service@3x.png"
          />
        </van-col>
      </van-row>
      <div class="content">
        <div>
          <van-row type="flex" align="center">
            <van-col span="6" v-for="(item,index) in titleTriangle" :key="index">
              <div @click="controlPopup(index)">
                <span>{{item.text}}</span>
                <!-- 根据状态去选择三角形的展示状态 -->
                <img
                  class="triangle"
                  src="../../../assets/img/designer/homePage/triangle@2x.png"
                  :class="item.up?'end':'start'"
                />
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div class="overlay" ref="overlay" v-if="overlay" @click="dispalyOverlay()"></div>

      <!-- 地点弹窗 -->
      <div class="popup">
        <div class="locationStart" :style="`height:${contentHeight}rem`">
          <!-- 地点弹窗 -->
          <div class="locationStart-layout" v-if="value === 0">
            <div class="btn" @click="chooseClose()" :class="{chooseBtn:nearLocation}">
              <span>距离最近</span>
            </div>
            <div class="line"></div>
            <p>全部区域</p>
            <div class="btn-layout">
              <div
                class="btn"
                v-for="(item,index) in btnList"
                :key="index"
                @click="chooseLocation(index,item)"
                :class="{chooseBtn:select === index}"
              >
                <span>{{item.areaName}}</span>
              </div>
            </div>
          </div>
          <!-- 价格弹窗 -->
          <div class="price-layout" v-if="value === 1">
            <div class="price-content">
              <div
                class="price"
                v-for="(item,index) in priceList"
                :key="index"
                @click="choiceSort(index)"
              >
                <span :class="{fontcolor:choicePrice === index}">{{item.label}}</span>
                <img :src="item.img" v-if="choicePrice === index" />
              </div>
              <p>价格区间 (元/时)</p>
              <div class="input-layout">
                <div class="inputWidth">
                  <input
                    type="text"
                    v-model="searchInfo.searchPrice.beginPrice"
                    align="middle"
                    placeholder="最低价¥30/h"
                    :class="{errorInput:showRegLeft}"
                    class="needsclick"
                    @blur="setBMH"
                    @click="inputfocus"
                  />
                </div>
                <span class="regTextLeft" v-if="showRegLeft">{{showRegLeftText}}</span>
                <img class="separate" src="../../../assets/img/designer/homePage/Separate@2x.png" />
                <div class="inputWidth">
                  <input
                    type="text"
                    v-model="searchInfo.searchPrice.endPrice"
                    align="middle"
                    placeholder="最高价¥100/h"
                    :class="{errorInput:showRegRight}"
                    class="needsclick"
                    @blur="setBMH"
                    @click="inputfocus"
                  />
                </div>
                <span class="regTextRight" v-if="showRegRight">{{showRegRightText}}</span>
              </div>
            </div>
            <div class="btn-sureReset">
              <div class="btn-reset btn-layout" @click="resetPriceBtn()">
                <span>重置</span>
              </div>
              <div class="btn-sure btn-layout" @click="emitSort()">
                <span>确定</span>
              </div>
            </div>
          </div>
          <!-- 评价弹窗 -->
          <div class="evaluation-layout" v-if="value === 2">
            <div
              class="evaluation"
              v-for="(item,index) in evaluationList"
              :key="index"
              @click="chooseEvaluation(index)"
            >
              <div>
                <p :class="{fontColor:evaluationChoice === index}">{{item.label}}</p>
                <img :src="item.img" v-if="evaluationChoice === index" />
              </div>
              <div class="line" v-if="index < 4 "></div>
            </div>
          </div>
          <!-- 筛选弹窗 -->
          <div style="position:relative;" v-if=" value === 3">
            <div class="filter-layout">
              <div class="filter-content">
                <van-collapse v-model="activeNames">
                  <van-collapse-item title="空档日期" name="1">
                    <div class="btn-group">
                      <div
                        class="btn"
                        v-for="(item,index) in dateList"
                        :key="index"
                        @click="filterDatefunction(item,index)"
                        :class="{btnactive:item.isChoice}"
                      >
                        <span v-if="index <= 2">{{index | getDateType}}</span>
                        <span v-else>{{item.time | getMD}}</span>
                      </div>
                    </div>
                  </van-collapse-item>
                  <van-collapse-item title="空间" name="2">
                    <div v-for="(item,index) in space" :key="index">
                      <p>{{item.typeName}}</p>
                      <van-row gutter="20">
                        <van-col span="8" v-for="(typeF,childs) in item.childs" :key="childs">
                          <div
                            class="btn"
                            :class="{btnactive:typeF.isChoice}"
                            @click="demoText(index,childs,item,typeF)"
                          >{{typeF.typeName}}</div>
                        </van-col>
                      </van-row>
                    </div>
                  </van-collapse-item>
                  <van-collapse-item title="风格" name="3">
                    <van-row gutter="20">
                      <van-col span="8" v-for="(item,index) in designStyle" :key="index">
                        <div
                          class="btn"
                          :class="{btnactive:item.isChoice}"
                          @click="chooseItem(item,index)"
                        >{{item.styleName}}</div>
                      </van-col>
                    </van-row>
                  </van-collapse-item>
                </van-collapse>
              </div>
              <div class="btn-sureReset">
                <div class="btn-reset btn-layout" @click="resetBtn()">
                  <span>重置</span>
                </div>
                <div class="btn-sure btn-layout" @click="sureFilter()">
                  <span>确定</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表现师技能标签 -->
    <div class="tabsBox">
      <div class="tabs">
        <div
          class="caps"
          v-for="(item,index) in caps"
          :key="index"
          :class="{tabsChoice:capsChoice===index}"
          @click="capsBtn(item,index,$event)"
        >{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { constants } from "crypto";
export default {
  data() {
    return {
      search: "",
      cityStatus: true,
      nearLocation: false,
      titleTriangle: [
        { text: "地点", up: false, contentHeight: "5.2" },
        { text: "价格", up: false, contentHeight: "5.25" },
        { text: "评价", up: false, contentHeight: "5.6" },
        { text: "筛选", up: false, contentHeight: "9" }
      ],
      show: false,
      locationArea: true,
      checked: true,
      list: [],
      btnList: [],
      select: 10,
      overlay: false,
      priceList: [
        {
          label: "价格从低到高",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        },
        {
          label: "价格从高到低",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        }
      ],
      choicePrice: -1,
      evaluationList: [
        {
          label: "综合",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        },
        {
          label: "效率",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        },
        {
          label: "沟通",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        },
        {
          label: "服务",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        },
        {
          label: "质量",
          img: require("../../../assets/img/designer/homePage/tick@2x.png")
        }
      ],
      evaluationChoice: "",
      value: "",
      activeNames: ["0"],
      dateList: [],
      space: [],
      designStyle: [],
      filterSelectDesignStyle: -1,
      filterList: [],
      contentHeight: "0",
      filterDate: -1,
      searchInfo: {
        searchInput: "",
        searchLocation: "",
        //价格区间排序方式 false=>desc/true=>asc
        //beginPrice：根据最低价格区间筛选
        //endPrice：根据最高价格区间筛选
        searchPrice: {
          priceSortType: 2,
          beginPrice: "",
          endPrice: ""
        },
        //根据评价排序 排序类型:1:综合,2:效率,3:沟通,4:服务,5:质量
        evaluation: "",
        //顶部搜索(根据表现师名称)
        searchStr: ""
      },
      caps: [],
      capsChoice: -1,
      //cityUid
      cityUid: 202,
      filiter: {
        uidList: [],
        getDay: [],
        styleUid: []
      },
      capsUid: [],
      showSearch: true,
      showRegLeft: false,
      showRegRight: false,
      showRegLeftText: "",
      showRegRightText: "",
      leftValue: true,
      rightValue: true
    };
  },
  filters: {
    getDateType(index) {
      switch (index) {
        case 0:
          return "今天";
          break;
        case 1:
          return "明天";
          break;
        case 2:
          return "后天";
        default:
          break;
      }
    },
    getMD(val) {
      let m = val.substring(5, 7);
      let d = val.substring(8, 10);
      return m + "/" + d;
    }
  },
  computed: {
    beginPrice() {
      return this.searchInfo.searchPrice.beginPrice;
    },
    endPrice() {
      return this.searchInfo.searchPrice.endPrice;
    }
  },
  watch: {
    /*
     * 价格输入框的正则控制
     */
    beginPrice(newVal) {
      let reg = /^[1-9][0-9]{1,2}$/;
      let minVal = parseInt(newVal);
      this.leftValue = false;
      if (!reg.test(newVal)) {
        this.showRegLeft = true;
        this.showRegLeftText = "请输入合理的值";
        if (newVal === "" || newVal == null) {
          this.leftValue = true;
          this.showRegLeft = false;
        }
      } else if (minVal < 30) {
        this.showRegLeftText = "请输入合理的值";
        this.showRegLeft = true;
      } else if (minVal > 100) {
        this.showRegLeft = true;
        this.showRegLeftText = "请输入合理的值";
      } else {
        this.showRegLeft = false;
        this.leftValue = true;
      }
    },
    /*
     * 价格输入框的正则控制
     */
    endPrice(newVal) {
      let reg = /^[1-9][0-9]{1,2}$/;
      let maxVal = parseInt(newVal);
      let minVal = parseInt(this.searchInfo.searchPrice.beginPrice);
      this.rightValue = false;
      if (!reg.test(newVal)) {
        this.showRegRight = true;
        this.showRegRightText = "请输入合理的值";
        if (newVal === "" || newVal == null) {
          this.rightValue = true;
          this.showRegRight = false;
        }
      } else if (maxVal < 30) {
        this.showRegRightText = "请输入合理的值";
        this.showRegRight = true;
      } else if (maxVal > 100) {
        this.showRegRight = true;
        this.showRegRightText = "请输入合理的值";
      } else if (minVal > maxVal) {
        this.showRegRight = true;
        this.showRegRightText = "请输入合理的值";
      } else {
        this.showRegRight = false;
        this.rightValue = true;
      }
    },
    /*
     * 监听遮罩层的出现与消失
     */
    overlay(newVal) {
      this.$emit("maxHeight", this.overlay);
    },
    /*
     * 监听标签的值的变化
     */
    caps(val) {
      this.caps = val;
    }
  },
  mounted() {
    this.GetDateStr();
    this.selectArea();
    this.proficiencyTypes();
    this.proficiencyStyle();
    this.allskill();
  },
  methods: {
    /*
     * 控制出现菜单栏后遮罩层下的内容不滑动
     */
    setBMH() {
      let h = "100vh";
      this.$emit("setBMH", h);
    },
    inputfocus() {
      let h = "130vh";
      this.$emit("setFMH", h);
    },
    /*
     *控制头部导航栏展示与收回
     */
    controlPopup(index) {
      this.titleTriangle.forEach((item, key) => {
        if (key == index) {
          item.up = !item.up;
          if (this.value === index && !item.up) {
            this.contentHeight = "0";
            this.overlay = false;
          } else {
            this.contentHeight = item.contentHeight;
            this.overlay = true;
          }
        } else {
          item.up = false;
        }
      });
      if (this.value != index || this.value === "") {
        this.value = index;
      }
    },
    goToService() {
      this.$router.push("/advisory");
    },
    /*
     * 筛选表现师的排序为按评价排序
     */
    chooseEvaluation(index) {
      this.nearLocation = false;
      this.select = -1;
      this.titleTriangle[1].text = "价格";
      this.searchInfo.searchPrice.beginPrice = "";
      this.searchInfo.searchPrice.endPrice = "";
      this.titleTriangle[0].text = "地点";
      this.evaluationChoice = index;
      this.choicePrice = -1;
      let i = this.evaluationChoice + 1;
      this.$emit("evalution", i);
      this.dispalyOverlay();
    },
    choiceSort(index) {
      this.choicePrice = index;
      this.searchInfo.searchPrice.priceSortType = index + 1;
    },
    /*
     * 确定使用价格筛选并传递确定的价格筛选的值到父组件仲
     */
    emitSort() {
      let beginPrice = this.searchInfo.searchPrice.beginPrice;
      let endPrice = this.searchInfo.searchPrice.endPrice;
      this.titleTriangle[0].text = "地点";
      this.evaluationChoice = -1;
      this.select = -1;
      this.nearLocation = false;
      if (!this.leftValue) {
        this.searchInfo.searchPrice.beginPrice = "";
        this.dispalyOverlay();
        this.$toast("输入的最低价有误");
      } else if (!this.rightValue) {
        this.searchInfo.searchPrice.endPrice = "";
        this.dispalyOverlay();
        this.$toast("输入的最高价有误");
      } else {
        if (!endPrice && beginPrice) {
          this.titleTriangle[1].text = "￥" + beginPrice;
        } else if (!beginPrice && endPrice) {
          this.titleTriangle[1].text = "￥" + endPrice;
        } else if (endPrice && beginPrice) {
          this.titleTriangle[1].text =
            "￥" + beginPrice + "-" + "￥" + endPrice;
        } else if (!endPrice && !beginPrice) {
          this.titleTriangle[1].text = "价格";
        }
        this.$emit("priceSort", this.searchInfo.searchPrice);
        this.dispalyOverlay();
      }
    },
    /*
     * 选择距离最近的表现师，并且清空别的筛选的值
     */
    chooseClose() {
      this.titleTriangle[1].text = "价格";
      this.searchInfo.searchPrice.beginPrice = "";
      this.searchInfo.searchPrice.endPrice = "";
      this.select = -1;
      this.evaluationChoice = -1;
      this.choicePrice = -1;
      this.nearLocation = true;
      this.titleTriangle[0].text = "地点";
      this.dispalyOverlay();
      this.$emit("nearest", this.searchInfo.distanceAsc);
    },
    /*
     * 按区域筛选符合条件的表现师，并且清空别的筛选条件
     */
    chooseLocation(index, item) {
      this.titleTriangle[1].text = "价格";
      this.searchInfo.searchPrice.beginPrice = "";
      this.searchInfo.searchPrice.endPrice = "";
      this.evaluationChoice = -1;
      this.choicePrice = -1;
      this.select = index;
      this.titleTriangle[0].text = item.areaName;
      this.nearLocation = false;
      this.dispalyOverlay();
      this.$emit("location", item);
    },
    /*
     * 添加按时间排序，将时间Uid push到this.filiter对象里面
     */
    filterDatefunction(item, index) {
      if (item.isChoice) {
        this.$set(this.dateList[index], "isChoice", false);
        if (this.filiter.getDay.indexOf(item.time) > -1) {
          this.filiter.getDay.splice(item.time, 1);
        }
      } else {
        this.$set(this.dateList[index], "isChoice", true);
        this.filiter.getDay.push(item.time);
      }
    },
    /*
     * 实现筛选空间部分的多选，并且将空间Uid push到this.filiter对象里
     */
    demoText(index, childIndex, item, typeF) {
      let arr = this.filiter.uidList;
      if (typeF.isChoice) {
        this.$set(this.space[index].childs[childIndex], "isChoice", false);
        if (arr.indexOf(typeF.uid) > -1) {
          arr.splice(arr.indexOf(typeF.uid), 1);
        }
      } else {
        this.$set(this.space[index].childs[childIndex], "isChoice", true);
        arr.push(typeF.uid);
      }
    },
    /*
     *选择筛选的值，并触发获取表现师的接口
     */
    sureFilter() {
      this.$emit("filter", this.filiter);
      this.dispalyOverlay();
    },
    /*
     * 实现标签栏的多选功能，将标签Uid push到this.capsUId数组中，触发获取符合条件的表现师信息
     */
    capsBtn(item, index, e) {
      if (e.target.className.indexOf("tabsChoice") == -1) {
        e.target.className = "caps tabsChoice";
        document.getElementsByClassName("caps")[index].style.color = "#ffffff";
        this.capsUid.push(item.uid);
      } else {
        e.target.className = "caps";
        document.getElementsByClassName("caps")[index].style.color = "#656565";
        for (let i = 0; i < this.capsUid.length; i++) {
          if (this.capsUid[i] === item.uid) {
            this.capsUid.splice(i, 1);
            break;
          }
        }
      }
      this.$emit("caps", this.capsUid);
      //this.dispalyOverlay();
    },
    /*
     *根据i决定往后几天
     */
    GetDateStr() {
      for (let i = 0; i < 15; i++) {
        var dd = new Date();
        dd.setDate(dd.getDate() + i); //获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m =
          dd.getMonth() + 1 < 10
            ? "0" + (dd.getMonth() + 1)
            : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
        this.dateList.push({ time: y + "-" + m + "-" + d });
      }
    },
    /*
     * 实现风格部分的多选，并且将风格Uid push到this.filiter对象中
     */
    chooseItem(item, index) {
      if (item.isChoice) {
        this.$set(this.designStyle[index], "isChoice", false);
        for (let i = 0; i < this.filiter.styleUid.length; i++) {
          if (this.filiter.styleUid[i] === item.uid) {
            this.filiter.styleUid.splice(i, 1);
            break;
          }
        }
      } else {
        this.$set(this.designStyle[index], "isChoice", true);
        this.filiter.styleUid.push(item.uid);
      }
    },
    /*
     * 重置价格筛选
     */
    resetPriceBtn() {
      this.searchInfo.searchPrice.beginPrice = "";
      this.searchInfo.searchPrice.endPrice = "";
      this.choicePrice = -1;
      this.titleTriangle[1].text = "价格";
      this.$emit("reset", this.searchInfo);
      this.dispalyOverlay();
    },
    //筛选数据清空
    resetBtn() {
      let a = this.designStyle;
      a.forEach(item => {
        if (item.isChoice) {
          item.isChoice = false;
        }
      });
      let b = this.space;
      b.forEach(item => {
        for (let i = 0; i < item.childs.length; i++) {
          if (item.childs[i].isChoice) {
            item.childs[i].isChoice = false;
          }
        }
      });
      let c = this.dateList;
      c.forEach(item => {
        if (item.isChoice) {
          item.isChoice = false;
        }
      });
      this.filiter = {
        getDay: [],
        styleUid: [],
        uidList: []
      };
      this.$emit("resetFilter", this.filiter);
      this.dispalyOverlay();
    },
    searchPage() {
      this.$emit("controlShowSearch", this.showSearch);
    },
    //遮罩层
    dispalyOverlay() {
      this.searchInfo.searchPrice.beginPrice = "";
      this.searchInfo.searchPrice.endPrice = "";
      this.contentHeight = "0";
      this.overlay = false;
      this.titleTriangle.forEach(item => {
        item.up = false;
      });
      let a = this.$refs.overlay;
      a.addEventListener("touchmove", function(event) {
        event.preventDefault();
      });
    },
    /*
     * 获取深圳区域信息
     */
    async selectArea() {
      const e = await HTTP("order/selectArea", {
        cityUid: this.cityUid
      });
      if (e.code === 200) {
        this.btnList = e.data;
      } else {
        this.$toast({ message: e.msg });
      }
    },
    /* 
     * 获取空间信息
    */
    async proficiencyTypes() {
      const e = await HTTP("allProficiencyTypes");
      if (e.code === 200) {
        this.space = e.data;
      } else {
        this.$toast({ message: e.msg });
      }
    },
    /* 
     * 获取设计风格信息
    */
    async proficiencyStyle() {
      const e = await HTTP("allProficiencyStyles");
      if (e.code === 200) {
        this.designStyle = e.data.proficiencyStylesList;
      } else {
        this.$toast({ message: e.msg });
      }
    },
    /* 
     * 获取标签栏信息
    */
    async allskill() {
      const e = await HTTP("tuxiaozhu/app/skill/allSkill");
      if (e.code === 200) {
        this.caps = e.data.skillTargetsList;
      } else {
        this.$toast({ message: e.msg });
      }
    }
  }
};
</script>


<style lang="scss" scoped>
#d-homepageHeader {
  background: #5e8efe;
  position: fixed;
  z-index: 60;
  width: 100%;
  .header {
    // position: fixed;
    // z-index: 9999;
    width: 100%;
    .van-row {
      // margin-top: 0.16rem;
    }
    .serachInput {
      width: 100%;
      height: 0.6rem;
      display: flex;
      font-size: 0.28rem;
      border-radius: 0.1rem;
      background: #7da4fe;
      color: #cadafe;
      align-items: center;
      p {
        margin-left: 0.12rem;
      }
    }
    .van-col {
      text-align: center;
      span {
        font-size: 0.3rem;
        color: #ffffff;
      }
      > div:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .van-search__content {
      opacity: 0.2;
    }
    .van-search {
      padding: 0.16rem 0;
    }
    .content {
      height: 0.97rem;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-around;
    }
    .triangle {
      width: 0.13rem;
      height: 0.09rem;
      margin-left: 0.1rem;
    }
    .servie {
      width: 0.38rem;
      height: 0.42rem;
    }
    .start {
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
    }
    .end {
      transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
    }

    .overlay {
      background-color: rgba(0, 0, 0, 0.5);
      height: 100%;
      width: 100%;
      position: fixed;
      top: 2rem;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9;
    }
    .popup {
      position: fixed;
      width: 100%;
      z-index: 10;
    }
    .chooseBtn {
      background: #5e8efe !important;
      color: #ffffff !important;
    }
    .locationStart {
      width: 100%;
      height: 0rem;
      overflow: auto;
      background: #ffffff;
      transition: height 0.4s;
      .locationStart-layout {
        padding: 0.24rem 0.24rem 0.36rem 0.24rem;
        p {
          font-size: 0.24rem;
          color: #959595;
          margin: 0.24rem 0;
        }
        .btn {
          width: 2.18rem;
          height: 0.7rem;
          border-radius: 0.1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0.12rem 0.06rem;
          background: #f5f5f5;
          span {
            font-size: 0.28rem;
            color: #282828;
          }
        }
        .btn-layout {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
        }
        .line {
          width: 100%;
          height: 1px;
          background: #e5e5e5;
          margin: 0.24rem 0 0.12rem 0;
        }
        .chooseBtn {
          background: #5e8efe !important;
          span {
            color: #ffffff !important;
          }
        }
      }
      .price-layout {
        overflow: hidden;
        .btn-sureReset {
          display: flex;
          width: 100%;
          margin-top: 0.28rem;
          .btn-reset {
            background: #ffffff;
            color: #5e8efe;
            font-size: 0.28rem;
          }
          .btn-sure {
            background: #5e8efe;
            color: #ffffff;
            font-size: 0.28rem;
          }
          .btn-layout {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 1rem;
            border-top: 0.01rem solid #e5e5e5;
          }
        }
        .price-content {
          padding: 0 0.24rem;
          .separate {
            width: 0.3rem;
            height: 0.02rem;
            margin: 0 0.2rem;
          }
          .price {
            padding: 0.36rem 0;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.01rem solid #e5e5e5;
            span {
              font-size: 0.28rem;
              color: #656565;
              font-weight: 400;
            }
            .fontcolor {
              color: #5e8efe;
            }
            img {
              width: 0.24rem;
              height: 0.18rem;
            }
          }
          p {
            font-size: 0.24rem;
            font-weight: 400;
            color: #959595;
            padding: 0.36rem 0 0.1rem 0;
          }
          input {
            width: 2.18rem;
            height: 0.7rem;
            outline: none;
            border: #f5f5f5;
            background: #f5f5f5;
            border-radius: 0.1rem;
            text-align: center;
            padding: 0 0.27rem;
            color: #282828;
          }
          .input-layout {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .inputWidth {
            width: 2.5rem;
            height: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .evaluation-layout {
        padding: 0 0.24rem;
        .evaluation {
          > div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
              font-size: 0.28rem;
              color: #656565;
              font-weight: 400;
              padding: 0.35rem 0;
            }
            .fontColor {
              color: #5e8efe;
            }
          }
          .line {
            width: 100%;
            height: 1px;
            background: #e5e5e5;
          }
          img {
            width: 0.24rem;
            height: 0.18rem;
          }
        }
      }
      .filter-layout {
        .filter-content {
          height: 8rem;
          overflow: auto;
        }
        .btn-group {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .btn {
          width: 2.18rem;
          height: 0.7rem;
          background: #f5f5f5;
          border-radius: 0.1rem;
          margin: 0.12rem 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #282828;
        }
        .btnactive {
          background: #5e8efe;
          color: #ffffff;
        }
        .btn-sureReset {
          display: flex;
          width: 100%;
          .btn-reset {
            background: #ffffff;
            color: #5e8efe;
            font-size: 0.28rem;
          }
          .btn-sure {
            background: #5e8efe;
            color: #ffffff;
            font-size: 0.28rem;
          }
          .btn-layout {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 1rem;
            border-top: 0.01rem solid #e5e5e5;
          }
        }
      }
    }
    .errorInput {
      border: 0.02rem solid red !important;
    }
    .regTextLeft {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      color: red;
      font-size: 0.13rem;
    }
    .regTextRight {
      position: absolute;
      bottom: 1rem;
      right: 0.7rem;
      color: red;
      font-size: 0.13rem;
    }
  }
  .tabsBox {
    //padding-top: 2rem;
    overflow: hidden;
    // position: fixed;
    // z-index: 999;
    // width: 100%;
    .tabs {
      background: #f9f9f9;
      width: 100%;
      // height: 1rem;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      .caps {
        height: 0.56rem;
        border-radius: 0.28rem;
        border: 0.01rem solid #dddddd;
        font-size: 0.26rem;
        color: #656565;
        font-weight: 400;
        display: inline-block;
        box-sizing: border-box;
        margin: 0.3rem 0.2rem;
        line-height: 0.5rem;
        padding: 0 0.13rem;
        background: #ffffff;
        // width:33%;
      }
    }
    .tabsChoice {
      border: 0.01rem solid #5e8efe !important;
      background: #5e8efe !important;
      color: #ffffff;
    }
  }
}
</style>

<style lang="scss">
.filter-layout {
  .van-cell {
    &:not(:last-child) {
      &::after {
        border-bottom: 0 !important;
      }
    }
  }
}
</style>




